<template>
	<view>
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></swiper-tab-head>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newlists" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<!-- 话题列表 -->
							<view class="topic-view">
								<block v-for="(item, key) in items.list" :key="key">
									<topic-list :item="item" :index="key"></topic-list>
								</block>
							</view>
							<!-- 上拉加载 -->
							<loadMore :loadtext="items.loadtext"></loadMore>
						</template>
						<template v-else>
							<noThing></noThing>
						</template>
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from "../../components/index/swiper-tab.vue";
	import noThing from "../../components/common/no-thing.vue";
	import loadMore from "../../components/common/load-more.vue";
	import topicList from "../../components/news/topic-list.vue";
	export default {
		components: {
			swiperTabHead,
			noThing,
			loadMore,
			topicList
		},
		data() {
			return {
				swiperheight: 500,
				tabIndex: 0,
				tabBars: [{
					name: '关注',
					id: 'guanzhu'
				}, {
					name: '推荐',
					id: 'tuijian'
				}, {
					name: '体育',
					id: 'tiyu'
				}, {
					name: '热点',
					id: 'redian'
				}, {
					name: '财经',
					id: 'caijing'
				}, {
					name: '娱乐',
					id: 'yule'
				}],
				newlists: [{
						loadtext: "上拉加载更多",
						list: [{
								titlepic: "../../static/demo/topicpic/13.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/demo/topicpic/13.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/demo/topicpic/13.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/demo/topicpic/13.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/demo/topicpic/13.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/demo/topicpic/13.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/demo/topicpic/13.jpeg",
								title: "话题名称",
								desc: "我是话题描述",
								totalnum: 50,
								todaynum: 10
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: []
					}
				],
			}
		},
		methods: {
			tabtap(index) {
				this.tabIndex = index
			},
			tabChange(e) {
				this.tabIndex = e.detail.current
			},
			loadmore(index) {
				if (this.newlists[index].loadtext != "上拉加载更多") {
					return;
				}
				this.newlists[index].loadtext = "加载中...";
				setTimeout(() => {
					let obj = {
						titlepic: "../../static/demo/topicpic/13.jpeg",
						title: "话题名称",
						desc: "我是话题描述",
						totalnum: 50,
						todaynum: 10
					};
					this.newlists[index].list.push(obj);
					this.newlists[index].loadtext = "上拉加载更多";
				}, 1000);

				//this.newlists[index].loadtext="没有更多数据了";
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperheight = height

				}
			});
		},
		onReachBottom() {
			// 上拉加载
			this.loadmore();
		}
	}
</script>

<style lang="scss" scoped>
	.topic-view{
		padding: 0 20rpx;
	}
</style>
